<template>
    <!--  -->
    <el-dialog title="分配角色" v-model="props.visible" :before-close="beforeClose">
          <el-form  label-width="100px">
              <el-form-item label="类型名称">
                  <el-input v-model="ownForm.name"></el-input>
              </el-form-item>
          </el-form>
          <template #footer>
              <span>
                  <el-button type="primary" @click="onConfirm">确定</el-button>
              </span>
          </template>
          </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { defineProps, watch, ref, reactive, withDefaults, defineEmits } from 'vue'
  import type { Ref } from 'vue'
//   import type { IAdminListItem } from '../../request/QmsAdminConreiller/index'
import {IAdminListItem ,hahaha} from '../../request/productAttr';
  
  let props = withDefaults(
      defineProps<{
          visible: boolean;
          form: hahaha
      }>(), {
      visible: true
  })
  let originForm = ref({}) as Ref<hahaha>   // 相当于一个空的备份
  let ownForm = ref({}) as Ref<hahaha>
  
      watch(() => props.form, (newVal) => {
      // console.log(newVal);
      ownForm.value = { ...newVal }
      originForm.value = { ...newVal }
  })
  
  
  // 自定义事件
  let emits = defineEmits<{
      (event: "cancel"): void;
      (event: "confirm", row: hahaha): void
  }>()
  
  let beforeClose = (done: any) => {
      // console.log(done);
      // done()  // 一般我们不执行done 函数，应该由父级去监听自定义事件 然后关闭
      emits("cancel")
  }
  
  
  
  // 确定
  let onConfirm = () => {
      // console.log(ownForm.value);
      // 将参数返回给父级 ，让父级发请求完成功能
      emits('confirm', ownForm.value)
      console.log(ownForm.value);
      
  }
  
  
  
  </script>
  
  <style lang="scss" scoped>
  
  </style>